<template>
  <div>
    <!-- ===============使用百度第三方==================== -->
    <MBX level1="数据统计" level2="数据报表"></MBX>
    <!-- 主体 -->
    <el-card class="mt16">
      <!-- <div ref="myChart" id="box"></div> -->
      <!-- 
        :autoresize="true"  实现自适应
        :autoresize     自动适配
      -->
      <v-chart
        ref="myChart"
        style="width: 100%"
        :options="config"
        :autoresize="true"
      ></v-chart>
    </el-card>
  </div>
</template>

<script>
// import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
      config: {
        // // 标题
        // title:{
        //   text:'vue-echarts'
        // },
        // // x轴
        // xAxis:{
        //   data:['全栈','大数据','人工智能']
        // },
        // // y轴
        // yAxis:{},
        // // 数据
        // series:[
        //   {
        //     type:'bar',
        //     data:[200,300,100]
        //   }
        // ]
      },
      preData: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
      },
    };
  },
  mounted() {
    this.getChart();
  },
  methods: {
    async getChart() {
      // 1. 获取节点
      // const chartDom = this.$refs.myChart;
      //  2. 初始化
      // this.myChart = echarts.init(chartDom);

      const res = await this.$API.tuBiaoApi();

      //3.配置图表数据option
      this.config = { ...this.preData, ...res };

      //4.渲染生成图表
      // this.myChart.setOption(this.config);
    },
  },
};
</script>

<style lang="scss" scoped>
#box {
  width: 100%;
  height: 600px;
}
</style>
